﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../Styles/Site.css" media="screen" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" media="screen" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" media="screen" />
    <link rel="stylesheet" href="../../Styles/qunit-git.css" media="screen" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../Scripts/qunit-git.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <title>jqxSlider Tests</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxSlider').jqxSlider({ width: '250px', height: '300px', orientation: 'horizontal', theme: 'classic' });

            module('Layout testing module');

            test('Testing width', function () {
                var width = 300, pixWidth = '300px';
                $('#jqxSlider').jqxSlider('width', width);
                ok($('#jqxSlider').width() === width, 'Width should be ' + width + 'px');
                $('#jqxSlider').jqxSlider('width', pixWidth);
                ok($('#jqxSlider').width() === parseInt(pixWidth, 10), 'Width should be ' + pixWidth);
            });

            test('Testing height', function () {
                var height = 20, pixHeight = '20px';
                $('#jqxSlider').jqxSlider('height', height);
                ok($('#jqxSlider').height() === height, 'Width should be ' + height + 'px');
                $('#jqxSlider').jqxSlider('height', pixHeight);
                ok($('#jqxSlider').height() === parseInt(pixHeight, 10), 'Height should be ' + pixHeight);
            });

            test('Testing track width', function () {
                var track = $('#jqxSlider').find('.jqx-slider-track');
                $('#jqxSlider').jqxSlider('showButtons', false);
                equal(track.width(), $('#jqxSlider').width(), 'Track should be width the same width as the slider');
                $('#jqxSlider').jqxSlider('showButtons', true);
                equal(2 + track.width(), $('#jqxSlider').width() - 2 * $($.find('.jqx-button')).outerWidth(true), 'Track should be with width equal to slider\'s width minus buttons width');
            });

            module('Functionality');

            test('Orientation', function () {
                var slider = $('#jqxSlider'),
                    track = slider.find('.jqx-slider-track'),
                    height = track.height(),
                    width = track.width();
                slider.jqxSlider('orientation', 'vertical');
                equal(track.width(), height, 'Slider\'s width should be equal to it\'s previous height.');
            });

            test('Thumb position', function () {
                var slider = $('#jqxSlider');
                slider.jqxSlider('orientation', 'vertical');
                var track = slider.find('.jqx-slider-track'),
                    min = slider.jqxSlider('min'), max = slider.jqxSlider('max'), step = slider.jqxSlider('step'),
                    sectorSize = track.height() / Math.abs(max - min),
                    thumb = $(slider.find('.jqx-slider-slider')[1]), expected, hostTop = slider.offset().top;
                for (var i = min; i < max + step; i += step) {
                    slider.jqxSlider('setValue', i);
                    expect = Math.abs((max - i) * sectorSize) - thumb.height() / 2;
                    ok(expect <= thumb.position().top + 3 && expect >= thumb.position().top - 3, 'Checking whether the slider is in the correct position');
                }
                slider.jqxSlider('orientation', 'horizontal');
            });

            test('Step/increment/decrement', function () {
                var oldValue = $('#jqxSlider').jqxSlider('value');
                $('#jqxSlider').jqxSlider('step', 2);
                $('#jqxSlider').jqxSlider('decrementValue');
                ok(oldValue - 2 === $('#jqxSlider').jqxSlider('value'), 'Slider\'s value should be equal to the old value - 2.');
                $('#jqxSlider').jqxSlider('incrementValue');
                ok(oldValue === $('#jqxSlider').jqxSlider('value'), 'Slider\'s value should be equal to the old value.');
            });

            test('Rangeslider', function () {
                var track = $('#jqxSlider').find('.jqx-slider-track');
                $('#jqxSlider').jqxSlider('rangeSlider', false);
                ok($(track.children('.jqx-slider-slider')[0]).css('visibility') !== 'visible', 'Slider\'s left thumb should not be visible.');
                $('#jqxSlider').jqxSlider('rangeSlider', true);
                ok($(track.children('.jqx-slider-slider')[0]).css('visibility') === 'visible', 'Slider\'s left thumb should be visible.');
            });

            test('Rangeslider - increment/decrement', function () {
                $('#jqxSlider').jqxSlider('rangeSlider', true);
                $('#jqxSlider').jqxSlider('value', { rangeEnd: 5, rangeStart: 1 });
                $('#jqxSlider').jqxSlider('step', 1);
                $('#jqxSlider').jqxSlider('incrementValue');
                ok($('#jqxSlider').jqxSlider('value').rangeEnd === 6, 'Slider\'s end value should be equal to 6.');
                $('#jqxSlider').jqxSlider('decrementValue');
                ok($('#jqxSlider').jqxSlider('value').rangeStart === 0, 'Slider\'s start value should be equal to 0.');
            });

            test('Showticks', function () {
                $('#jqxSlider').jqxSlider('showTicks', false);
                ok($($('#jqxSlider').find('.jqx-slider-tickscontainer')[0]).css('visibility') === 'hidden', 'Ticks should not be visible.');
                ok($($('#jqxSlider').find('.jqx-slider-tickscontainer')[1]).css('visibility') === 'hidden', 'Ticks should not be visible.');
                $('#jqxSlider').jqxSlider('showTicks', true);
                ok($($('#jqxSlider').find('.jqx-slider-tickscontainer')[0]).css('visibility') !== 'hidden', 'Ticks should be visible.');
                ok($($('#jqxSlider').find('.jqx-slider-tickscontainer')[1]).css('visibility') !== 'hidden', 'Ticks should be visible.');
            });

            test('TicksPosition', function () {
                $('#jqxSlider').jqxSlider('ticksPosition', 'top');
                ok($($('#jqxSlider').find('.jqx-slider-tickscontainer')[1]).css('visibility') === 'hidden', 'Bottom ticks should not be visible.');
                $('#jqxSlider').jqxSlider('ticksPosition', 'bottom');
                ok($($('#jqxSlider').find('.jqx-slider-tickscontainer')[0]).css('visibility') === 'hidden', 'Top ticks should not be visible.');
                $('#jqxSlider').jqxSlider('ticksPosition', 'both');
                ok($($('#jqxSlider').find('.jqx-slider-tickscontainer')[0]).css('visibility') !== 'hidden' && $($('#jqxSlider').find('.jqx-slider-tickscontainer')[1]).css('visibility') !== 'hidden',
                     'Both ticks containers should not be visible.');
            });

            test('ShowButtons', function () {
                $('#jqxSlider').jqxSlider('rangeSlider', false);
                var left = $('#jqxSlider').find('.jqx-slider-left'), right = $('#jqxSlider').find('.jqx-slider-right'), slider = $('#jqxSlider');
                $('#jqxSlider').jqxSlider('showButtons', false);
                ok(right.css('display') === 'none' && left.css('display') === 'none', 'Both buttons should be hidden.');
                $('#jqxSlider').jqxSlider('showButtons', true);
                ok(right.css('display') === 'block' && left.css('display') === 'block', 'Both buttons should be visible.');
            });

            test('ShowRange', function () {
                var slider = $('#jqxSlider'), rangeBar = $(slider.find('.jqx-slider-rangebar'));
                slider.jqxSlider('showRange', false);
                ok(rangeBar.css('display') === 'none', 'Rangebar should not be visible.');
                slider.jqxSlider('showRange', true);
                ok(rangeBar.css('display') !== 'none', 'Rangebar should be visible.');
            });

            test('Value type', function () {
                var slider = $('#jqxSlider');
                slider.jqxSlider('rangeSlider', true);
                ok(typeof slider.jqxSlider('value') === 'object', 'Rangeslider\'s value should be object.');
                ok(slider.jqxSlider('value').rangeEnd === slider.jqxSlider('values')[1] &&
                    slider.jqxSlider('value').rangeStart === slider.jqxSlider('values')[0], 'Values array and value object should have same values for the start and the end of the range.');
            });

//            module('Events');

//            test('change', function () {
//                var changed = false, slide = false;
//                $('#jqxSlider').on('slide', function () {
//                    slide = true;
//                });
//                $('#jqxSlider').on('change', function () {
//                    changed = true;
//                });
//                $('#jqxSlider').jqxSlider('value', 1);
//                ok(slide, 'jqxSlider\'s slide event should have been triggered.');
//                ok(changed, 'jqxSlider\'s change event should have been triggered.');
//            });

//            test('Canceling slide event', function () {
//                var changed = false, slide = false;
//                $('#jqxSlider').on('slide', function (event) {
//                    slide = true;
//                    event.args.cancel = true
//                });
//                $('#jqxSlider').on('change', function () {
//                    changed = true;
//                });
//                $('#jqxSlider').jqxSlider('value', 1);
//                ok(slide, 'jqxSlider\'s slide event should have been triggered.');
//            });
        });
    </script>
</head>
<body>
    <div style="width: 0px; height: 0px; overflow: hidden">
        <div id='jqxSlider'></div>
    </div>
    <br />
    <br />
    <div>
        <h1 id="qunit-header">
            QUnit jqxSlider</h1>
        <h2 id="qunit-banner">
        </h2>
        <div id="qunit-testrunner-toolbar">
        </div>
        <h2 id="qunit-userAgent">
        </h2>
        <ol id="qunit-tests">
        </ol>
        <div id="qunit-fixture">
            test markup, will be hidden</div>
    </div>
</body>
</html>